<template>
	<view id="user-apply">
		<view class="content-apply">
			<h5>成为代理，享有更多权益</h5>
			<view class="apply-box">
				<view class="apply-row">
					<view class="apply-tip">姓名</view>
					<view class="input">
						<input type="text" v-model="formObj.realname" placeholder="请输入姓名" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>
				<view class="apply-row">
					<view class="apply-tip">联系电话</view>
					<view class="input">
						<input type="number" v-model="formObj.phone" placeholder="请输入手机号码" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>
				<view class="apply-row">
					<view class="apply-tip">代理区域</view>
					<view class="input">
						<view class="name">成为{{filterObj.levelname}}</view>
						<image @click="$refs.transPopup.open()" src="/static/icon/right_arrow_icon_03.png" class="arrow-r" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content-footer">
			<view class="footer-btn" @click="submitFn()">成为代理商</view>
		</view>
		
		
		
		
		<!-- 选择代理 -->
		<uni-popup ref="transPopup" type="center" :mask-click="true">
			<view class="tran-popup">
				<view class="popup-top">
					<image @click.stop="$refs.transPopup.close()" src="/static/icon/right_arrow_03.png" class="arrow-icon" mode=""></image>
					<view class="popup-title">选择代理区域</view>
					<view></view>
				</view>
				<view class="popup-ul">
					<view class="popup-li" v-for="(fil,j) in filterArr" :key="fil.id" @click="getApply(fil,j)">
						<view>{{fil.levelname}}</view>
						<image v-show="filIndex == j" src="/static/icon/icon_select_01.png" class="radio-icon" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	data() {
		return {
			filterArr: [],
			filIndex: 0,
			filterObj: {},
			formObj: {
				id: '',
				phone: '',
				realname: '',
			},
		};
	},
	onLoad() {
		
		this.getList();
	},
	components: {
		uniPopup,
	},
	onShow() {

	},
	methods: {
		// 选择代理
		getApply(obj,i){
			this.filterObj = obj;
			this.formObj.id = obj.id;
			this.filIndex = i;
			this.$refs.transPopup.close();
		},
		// 获取代理
		getList(){
			this.$Request.request('/api/abonus/index','get',{}).then((res)=>{
				if(res.status == 1){
					this.filterArr = res.data;
					this.filterObj = this.filterArr[0];
					this.formObj.id = this.filterObj.id;
				}
			})
		},
		// 校验
		checkFn(){
			if(!this.formObj.realname){
				return this.$api.msg('请输入姓名')
			}
			let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/
			if(!this.formObj.phone){
				return this.$api.msg('请输入手机号码')
			}
			if(!reg.test(this.formObj.phone)){
				return this.$api.msg('请输入正确的手机号码')
			}
			return true;
		},
		// 提交
		submitFn(){
			if(this.checkFn() !== true){
				return false;
			}
			// console.log(JSON.stringify(this.formObj))
			this.$Request.request('/api/abonus/buy','post',this.formObj).then((res)=>{
				if(res.status == 1){
					this.$api.msg('申请成功')
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				}else {
					this.$api.msg(res.msg)
				}
			})
		},
	}
};
</script>

<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.content-apply {
		padding: 36rpx 32rpx 0px;
		box-sizing: border-box;
	}
	h5 {
		font-size: 32rpx;
		color: #1D1E22;
		font-weight: 600;
	}
	
	.apply-box {
		.apply-row {
			padding-top: 32rpx;
			.apply-tip {
				font-size: 24rpx;
				color: #92969E;
				line-height: 34rpx;
				margin-bottom: 22rpx;
			}
			.input {
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #EFEFEF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				input {
					font-size: 30rpx;
					color: #1D1E22;
				}
				.arrow-r {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
	
	.content-footer {
		position: fixed;
		width: 100%;
		z-index: 11;
		bottom: 62rpx;
		left: 0px;
		padding: 0px 54rpx;
		box-sizing: border-box;
		.footer-btn {
			width: 100%;
			height: 76rpx;
			background: #EE486C;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #fff;
		}
	}
	
	
	.tran-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 30upx 20px;
		box-sizing: border-box;
		.popup-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
			.arrow-icon {
				width: 36upx;
				height: 36upx;
			}
		}
		
		.popup-ul {
			width: 100%;
			.popup-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 102upx;
				border-bottom: 2upx solid #E8EDF5;
				font-size: 30upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
				.radio-icon {
					width: 36upx;
					height: 36upx;
				}
			}
			.popup-li:last-child {
				border: none;
			}
		}
	}
</style>
